<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>other</title>
</head>
<body>
    <h1>
        可继承的css属性： 
    </h1>
    <li>color - 文本颜色</li>
    <li>font-family - 字体系列</li>
    <li>font-size - 字体大小</li>
    <li>font-weight - 字体粗细</li>
    <li>font-style - 字体风格</li>
    <li>line-height - 行高</li>
    <li>text-align - 文本对齐方式</li>
    <li>vertical-align - 表格内元素的垂直对齐</li>
    <li>list-style - 列表样式</li>
    <li>cursor - 鼠标指针类型</li>
    <li>visibility - 元素的可见性</li>
    <li>white-space - 空白处理</li>
    <li>word-spacing - 单词间距</li>
    <li>letter-spacing - 字母间距</li>
    <li>text-decoration - 文本装饰</li>
    <li>text-transform - 文本转换</li>
    <li>opacity - 元素的不透明度</li>
    <h2>计算</h2>
    <li>html: 标签选择器，权重为1。</li>
    <li>body: 标签选择器，权重为1。
    </li>
    <li>div#first-div[title]: ID选择器加上属性选择器，ID选择器的权重为0，属性选择器不影响权重，所以这整个选择器的权重为0。
    </li>
    <li>.how-much:hover: 类选择器加上伪类选择器，类选择器的权重为10，伪类选择器不影响权重，所以这整个选择器的权重为10。
        将这些权重相加，我们得到总的优先级为 1 + 1 + 0 + 10 = 12。</li>
        <h3>
            计量单位
        </h3>
        <li>绝对单位是固定大小的单位，不随页面或视口大小的变化而变化。常用的绝对单位包括：

            px（像素）：屏幕显示上的一个点。
            pt（点）：1pt 等于 1/72 英寸。
            pc（派卡）：1pc 等于 12pt。</li>
        <li>相对单位是基于其他长度或视口的单位，会随页面或视口大小的变化而变化。常用的相对单位包括：

            em：相对于当前元素的字体尺寸的大小。
            rem：相对于根元素（html）的字体大小。
            %（百分比）：相对于父元素的对应属性的大小。
            vw（视口宽度单位）：视口宽度的 1%。
            vh（视口高度单位）：视口高度的 1%。
            vmin：视口的较小尺寸的 1%。
            vmax：视口的较大尺寸的 1%。</li>
        <li>em单位是基于父元素的字体大小来计算的。如果一个元素的font-size未明确设置，则继承自浏览器的默认字体大小（通常是16px）。</li>
        <li>rem单位则是相对于根元素（即<html>标签）的字体大小。无论rem单位出现在哪个元素中，它都是基于根元素的font-size计算的。这意味着使用rem可以保持整个页面的尺寸一致性，有利于响应式设计。</li>
</body>
</html>